import React, { Component } from 'react'
import Tabcont from './Tabcont'
import Tabtop from './Tabtop'
import axios from 'axios'

export class Main extends Component {
    constructor(props) {
        super(props)
      
        this.state = {
           list:[],
           i:0
        }
      }
      componentDidMount(){
        axios.get('/list').then(res=>{
            this.setState({
                list:res.data
            })
        })
      }
      changei(index){
          this.setState({
              i:index
          })
      }
      removetab(id){
        let {list}=this.state
        list=list.filter((item)=>{
            return item.id!==id
        })
        this.setState({
            list
        })
      }
  render() {
      const {list,i}=this.state
    return (
      <div>
          <Tabtop
            list={list}
            i={i}
            changei={this.changei.bind(this)}
            removetab={this.removetab.bind(this)}
          ></Tabtop>
          <Tabcont
          cont={list[i]?list[i].cont:[]}
          ></Tabcont>
      </div>
    )
  }
}

export default Main